.index{
    /*
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
    // width: 100vw;
    // height: 100vh;
    */
    width: 95%;
    max-width: 960px;
    /*
    // background: url(../static/bg.jpg) 50% 50% no-repeat;
    */
    background-size: cover;
    margin: 0 auto;
    opacity: 1;
    transition: opacity 1s;
    .ant-layout-footer{
        margin-top: 2em;
        outline: 1px red solid;
    }
    .index_main{
        display: flex;
        justify-content: space-between;
    }
    .ant-layout{
        background: #fff;
    }
    header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        width: 100%;
        /*
        padding: 10px 10px;
        outline: red 1px solid;
        */
        border-bottom: 1px solid rgb(221, 221, 221);
        padding: 10px 0px;
        margin-bottom: 20px;
        &>span:nth-child(1){
            /*
            line-height: 4em;
            height: 4em;
            */
           
        }
    }
    .logo{
        img{
            display: inline;
            height: 9em;
        }
        span{
            font-size: 1.5em;
            font-weight: bold;
            vertical-align: middle;
        }
        @media (max-width: 400px) {
            span{
            font-size: small;
            font-weight: bold;
            vertical-align: middle;
            }
        }
    }
    .syncing{
        padding-right: 10px;
        vertical-align: middle;
        cursor: pointer;
        svg{
            animation: spin 2s infinite linear;
            animation-direction: reverse;
        }
        
    }
    .sync{
        padding-right: 10px;
        vertical-align: middle;
        cursor: pointer;
    }
    .SuccessSyncIcon{
        padding-right: 10px;
        fill: #888;
        vertical-align: middle;
        cursor: pointer;
        .synchide{
            display: none;
        }
    }
    .ErrorSyncIcon{
        padding-right: 10px;
        fill: #888;
        vertical-align: middle;
        cursor: pointer;
    }
    .synchide{
        display: none;
    }
    
    .ant-input{
        /*width: 90%;*/
        
    }
    main:nth-of-type(1){
        width: 100%;
        display: flex;
        justify-content: center;
        /*
        padding: 10px 10px;
        */
        background: #fff;
        /*
        outline: red 1px solid;
        */
        border-radius: 5px;
        /*
        border: 1px solid #DDD;
        box-shadow: 0 2px 0 rgba(225,225,225,.2);
        */
        padding-right: .5em;
        height: fit-content;
       
    }
    main:nth-of-type(2){
        width: 100%;
        display: flex;
        justify-content: center;
        /*
        padding: 10px 10px;
        */
        background: #fff;
        /*
        outline: red 1px solid;
        */
        
        /*
        border: 1px solid #DDD;
        box-shadow: 0 2px 0 rgba(225,225,225,.2);
        */
        padding-left: .5em;
        height: fit-content;
       
    }
    .ant-dropdown-link{
        color: rgb(80, 86, 89);
        text-decoration: none;
        line-height: 4em;
        height: 4em;
        display: -webkit-inline-box;
        p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 8em;
        }
    }
    &>p:nth-child(1){
        font-size: 20px;
        font-weight: bold;
        z-index: 1;
    }
    .indexlogin{
        // margin-right: 3em;
        z-index: 1;
    }
    .indexsignup{
        margin-left: 3em;
        z-index: 1;
    }
    .ant-spin-spinning{
        zoom: 5;
        margin: 1vh 0;
        z-index: 1;
    }
    .time{
        width: 100%;
        padding: 15px 10px;
        border: 1px solid #DDD;
        border-radius: 5px;
        box-shadow: 0 2px 0 rgba(225,225,225,.2);
        .ant-btn-primary{
            width: 100%;
            color: #666;
            background-color: #f4f4f4;
            border-color: #bbb;
            box-shadow: none;
            text-shadow: none;
        /*
        margin-top: 10vh;
        width: 10vh;
        */
            span{
                font-size: 15px;
                font-weight: bold;
            }
        
        }
        .clock-circle{
            >p{
                /*
                
                margin: 0;
                border-top: 1px solid #ddd;
                padding: 5px 0;
                
                float: left;
                width: 100%;
                */
            }
        }
        span>.Tomato:nth-child(2){
            margin-top: 10px;
        }
        .Tomato:nth-of-type(1){
            margin-top: 10px;
            >p{
                border-top: 1px solid #ddd;
                padding: 5px 0;
                margin: 10px 0 0 0;
                // border-bottom: 1px solid #ddd;
                word-break: break-all;
                vertical-align: middle;
                text-align: justify;
            }
        }
        .Tomato{
            >p{
                border-top: 1px solid #ddd;
                padding: 5px 0;
                margin: 0px 0 0 0;
                word-break: break-all;
                vertical-align: middle;
                text-align: justify;
            }
        }
        .Tomato:nth-last-of-type(1){
            p{
                border-top: 1px solid #ddd;
                padding: 5px 0;
                margin: 0px 0 0 0;
                border-bottom: 1px solid #ddd;
                word-break: break-all;
                vertical-align: middle;
                text-align: justify;
            }
        }
        .TimeInput{
            position: relative;
            .TimeActioncancel{
                text-align: center;
                position: absolute;
                color: #9C9C97;
                font-family: Tahoma,sans;
                right: -.5em;
                cursor: pointer;
                line-height: 1rem;
                top: 0;
                margin-top: -.7em;
                background: #fff;
                border-radius: 2em;
                width: 1.2rem;
                height: 1.2rem;
                border: 1px solid #ccc;
                font-size: 1rem;
            }
        }
    }
    /*todo*/
    .todo{
        width: 100%;
        padding: 15px 10px;
        border: 1px solid #DDD;
        border-radius: 5px;
        box-shadow: 0 2px 0 rgba(225,225,225,.2);
        .ant-checkbox-group{
            display: flex;
            flex-direction: column;
        }
        .todo-list{
            display: flex;
            flex-direction: column;
            .ant-checkbox-wrapper:nth-of-type(1){
                margin-left: 8px;
            }
            .ant-checkbox-wrapper{
                word-break: break-all;
                vertical-align: middle;
                text-align: justify;
            }
            >span{
                display: flex;
                border-top: 1px solid #ddd;
                padding: 5px 0;
            }
            >span:nth-of-type(1){
                margin-top: 10px;
            }
            >span>span{
                flex: 1 1;
                // width: 100%;
            }
        }
        .complate{
            display: flex;
            flex-direction: column;
            .ant-checkbox-wrapper:nth-of-type(1){
                margin-left: 8px;
            }
            .ant-collapse-content-box{
            display: flex;
            flex-direction: column;
                >span{
                    display: flex;
                    border-top: 1px solid #ddd;
                    padding: 5px 0;
                }
                >span:nth-of-type(1){
                    margin-top: 10px;
                }
                >span>span{
                    flex: 1 1;
                    // width: 100%;
                }
            }
            .ant-checkbox-wrapper-checked{
                word-break: break-all;
                vertical-align: middle;
                text-align: justify;
                opacity: .5;
                text-decoration: line-through;
            }
            .ant-collapse-header{
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .CleanIcon{
                float: right;
                padding-top: 20px;
                cursor: pointer;
            }
            .ant-collapse-borderless{
                width: 95%;
            }
            .noselect {/*文本不能选中*/
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            /*
            .ant-collapse > .ant-collapse-item > .ant-collapse-header{
                padding: 0;
            }
            .ant-btn{
                width: 50%;
            }
            */
        }
    }

    .check-circle{
        width: 100%;
        text-align: center;
        margin-top: 20px;
        border-top: 1px solid rgb(221, 221, 221);
        /*
        padding-top: 20px;
        */
        padding: 2em;
        p{
            color: #999;
            margin: 1em;
        }
            .anticon svg{
            width: 80px;
            height: 80px;
            fill: #DDD;
        }
    }
    .clock-circle{
        width: 100%;
        text-align: center;
        margin-top: 20px;
        border-top: 1px solid rgb(221, 221, 221);
        /*
        padding-top: 20px;
        */
        padding: 2em;
        p{
            color: #999;
            margin: 1em;
        }
        .anticon svg{
            width: 80px;
            height: 80px;
            fill: #DDD;
        }
    }
    
    
    .kv-vbg{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    @media (max-width: 768px) {
        .index_main{
            flex-direction: column;
        }
        main:nth-of-type(2){
            padding: 0;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        main:nth-of-type(1){
            padding: 0;
        }
    }
}
.opsity{
    opacity: 0;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    
    100% {
        transform: rotate(359deg);
    }
}